<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>分布式任务调度系统</title>
    <link rel="stylesheet" href="./lib/elementUI/index.css"/>
    <link rel="stylesheet" href="./style/index.css"/>
    <script src="./lib/polyfill.min.js"></script>
    <script src="./lib/vue.min.js"></script>
    <script src="./lib/elementUI/index.js"></script>
    <script src="./lib/axios.js"></script>
    <script src="./helper/http.js"></script>
</head>
<body>
    <div id="app">
        <div class="header">分布式任务调度系统</div>
        <div class="searchBox">
            <el-autocomplete class="inline-input"
                v-model="state"
                :fetch-suggestions="querySearch"
                placeholder="请输入任务名"
                @select="handleSelect"
                @keyup.enter.native="jump"
            >
            </el-autocomplete>
            <el-button type="primary" @click="jump">查询</el-button>
        </div>
        <div class="taskTemplet">
            <template v-if="taskArr.length==0">
                <p class="info">暂无信息</p>
            </template>
            <template v-for="task in taskArr">
                <div v-show="showLabel==''||task.jobClass.match(showLabel)!=null">
                    <a class="anchor_fixed" :name="task.name"></a>
                    <div class="task">
                        <p class="title"><span>任务名称：</span>{{task.name}}<span>&nbsp;&nbsp;&nbsp;&nbsp;任务描述：</span>{{task.description}}</p>
                        <!-- <p class="client">客户端列表：</p> -->
                        <p class="type">支持调度类型：{{task.jobSupportScheduleType}}</p>
                        <p class="type" v-if="task.jobSupportScheduleType=='TRIGGER'&&task.registed">CronExpression：{{task.cronExpression}}</p>
                        <p class="type" v-if="task.jobSupportScheduleType=='EVENT'&&task.registed">EventName：{{task.event}}</p>
                        <div>
                            <!-- 注册 -->
                            <!-- {{task.jobParameters}} -->
                            <div class="taskbtn" v-if="!task.registed">
                                <div>
                                    <template v-if="task.jobSupportScheduleType=='TRIGGER'">
                                        必填：<input placeholder="group-name" v-model="task.group">
                                        必填：<input placeholder="cron" v-model="task.cron">如：0 0/10 0/23 * * ?
                                    </template>
                                    <template v-else-if="task.jobSupportScheduleType=='EVENT'">
                                        必填：<input placeholder="group-name" v-model="task.group">
                                        必填：<input placeholder="event-name" v-model="task.event">
                                    </template>
                                    <template v-else>
                                        必填：<input placeholder="group-name" v-model="task.group">
                                    </template>
                                </div>
                                <el-button type="success" @click="add(task)">注册</el-button>
                            </div>
                            <!-- 调度 -->
                            <div class="taskbtn" v-if="task.registed&&task.jobSupportScheduleType!='TRIGGER'">
                                <div>
                                    选填：<input placeholder="key" v-model="task.key">
                                    <form class="form" v-model="params">
                                        <template v-for="job in task.jobParameters">
                                            {{job.required? '必填：':'选填：'}}<input :placeholder="job.name" v-model="params[job.name]">
                                        </template>
                                    </form>
                                </div>
                                <el-button type="primary" @click="dispatch(task)">调度</el-button>
                            </div>
                            <!-- 删除 -->
                            <div class="taskbtn" v-if="task.registed">
                                <el-button type="danger" @click="deleteTask(task)">删除</el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </div>
        <div class="taskGroup">
            <div :class="showLabel==item? 'groupname select':'groupname'" v-for="item in groupArray" @click="show(item)">{{item}}</div>
        </div>
    </div>
</body>
    <script>
        new Vue({
            el: '#app',
            data: function() {
                return {
                    taskArr: [],
                    params: {},
                    state: '',
                    visible: false,
                    groupArray: ['暂无分组'],
                    showLabel: ''
                }
            },
            mounted: function(){
                // 获取job列表
                $http.get('./job/list')
                .then( resp =>{
                    let jobsObject = resp.data;
                    let jobsArray = [];
                    for(let item in jobsObject){
                        let obj = {}
                        obj = jobsObject[item];
                        if(obj!=null){
                            obj.value = jobsObject[item].name;
                            obj.registed = false;
                            obj.jobSupportScheduleType = jobsObject[item].jobSupportScheduleType==null? '':jobsObject[item].jobSupportScheduleType[0];
                            jobsArray.push(obj);
                        }
                    }
                    this.taskArr = jobsArray;
                    $http.get('./schedule/list')
                    .then( resp =>{
                        let registerArr = resp.data.filter(item=>{
                            return item.name!=null;
                        })
                        this.groupArray = [];
                        for(let jobs1 in jobsArray){
                            for(let jobs2 in registerArr){
                                let str = jobsArray[jobs1].jobClass.replace(/com\.iflytek\.aisp\.job\.biz\./,'').replace(/\.joblist.*/,'');
                                if(this.groupArray.join('*****').indexOf(str)<0){
                                    this.groupArray.push(str);
                                }
                                if(jobsArray[jobs1].name.toLowerCase()==registerArr[jobs2].name.toLowerCase()){
                                    // console.log(jobsArray[jobs1].jobClass);
                                    // console.log(jobsArray[jobs1].name);
                                    jobsArray[jobs1].registed = true;
                                    jobsArray[jobs1].jobSupportScheduleType = registerArr[jobs2].type;
                                    // console.log(registerArr[jobs2].group);
                                    jobsArray[jobs1].group = registerArr[jobs2].group;
                                    jobsArray[jobs1].delayLevel = registerArr[jobs2].retryDelayLevel;
                                    if(registerArr[jobs2].type=='EVENT'){
                                        jobsArray[jobs1].event = registerArr[jobs2].event;
                                    }
                                    if(registerArr[jobs2].type=='TRIGGER'){
                                        jobsArray[jobs1].cronExpression = registerArr[jobs2].cronExpression;
                                    }
                                }
                            }
                        }
                        this.showLabel = this.groupArray[0];
                    })
                    .catch( e =>{
                        console.log(e)
                    })
                    // 获取已添加列表
                })
                .catch( e =>{
                    console.log(e)
                })
            },
            methods:{
                querySearch(queryString, cb) {
                    let taskArr = this.taskArr.filter(item=>{return item.jobClass.match(this.showLabel)!=null});
                    let results = queryString ? taskArr.filter(this.createFilter(queryString)) : taskArr;
                    cb(results);
                },
                createFilter(queryString) {
                    let keyword = new RegExp(queryString.toLowerCase());
                    // console.log(keyword)
                    return (item) => {
                        // 首字母匹配
                        // return (item.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                        // 全局匹配
                        return (item.name.toLowerCase().match(keyword)!=null);
                    };
                },
                handleSelect(item) {
                    this.state = item.name;
                },
                jump() {
                    let aEl = document.createElement('a');
                    let url = '#'+this.state;
                    aEl.href=url
                    aEl.click()
                },
                add(task){
                    let data = {
                        type: task.jobSupportScheduleType,
                        group: task.group,
                        name: task.name,
                        jobClass: task.jobClass
                    };
                    // 检测group
                    if(data.group===undefined){this.$message({message:'请输入group的值', type:'error'}); return;}
                    if(task.jobSupportScheduleType=='TRIGGER'){
                        // type, group, name, jobClass, cron
                        data.cron = task.cron;
                        if(data.cron===undefined){this.$message({message:'请输入cron的值', type:'error'}); return;}
                    }else if(task.jobSupportScheduleType=='EVENT'){
                        // type, group, name, jobClass, event
                        data.event = task.event;
                        if(data.event===undefined){this.$message({message:'请输入event的值', type:'error'}); return;}
                    }
                    $http.post(this.paramsProcess('./schedule/add',data)).then(res=>{
                        if(res.data.name!=null){
                            for(let job in this.taskArr){
                                if(this.taskArr[job].name == res.data.name){
                                    this.taskArr[job].registed = true;
                                    this.taskArr[job].delayLevel = res.data.retryDelayLevel;
                                }
                            }
                        }
                    })
                },
                dispatch(task){
                    if (task.jobSupportScheduleType == 'EVENT'){
                        let data = {
                            event: task.event,
                            group: task.group,
                            key: task.key
                        }
                        let parameters = this.params;
                        // console.log(group);
                        $http.post(this.paramsProcess('./schedule/event',data),parameters).then(res=>{
                            console.log(res);
                            this.params = {};
                        })
                    }else if (task.jobSupportScheduleType == 'ASYNC'){
                        let data = {
                            group: task.group,
                            jobClass: task.jobClass,
                            delayLevel: task.delayLevel,
                            key: task.key
                        }
                        let parameters = this.params;
                        $http.post(this.paramsProcess('./schedule/async',data),parameters).then(res=>{
                            console.log(res);
                            this.params = {};
                        })
                    }
                },
                paramsProcess(url,data){
                    let queryString = url+'?';
                    for (let item in data){
                        let str = '';
                        if(data[item]===undefined){ str = item + '=';}
                        else {str = item + '='+ data[item];}
                        queryString = queryString + str + '&';
                    }
                    return queryString.slice(0,queryString.length-1);
                },
                deleteTask(task){
                    let data ={
                        type: task.jobSupportScheduleType,
                        group: task.group,
                        name: task.name
                    }
                    $http.post(this.paramsProcess('./schedule/delete',data)).then(res=>{
                        if(res.code == '0000'){
                            for(let job in this.taskArr){
                                if(this.taskArr[job].name == task.name){
                                    this.taskArr[job].registed = false;
                                    this.taskArr[job].group = '';
                                }
                            }
                        }
                    })
                    let data1 = {
                        type: task.jobSupportScheduleType,
                        group: task.group,
                        name: task.name.substr(0,1).toLowerCase()+task.name.substr(1)
                    }
                    $http.post(this.paramsProcess('./schedule/delete',data1)).then(res=>{
                        if(res.code == '0000'){
                            for(let job in this.taskArr){
                                if(this.taskArr[job].name == task.name){
                                    this.taskArr[job].registed = false;
                                    this.taskArr[job].group = '';
                                }
                            }
                        }
                    })
                },
                show(item){
                    this.showLabel = item;
                }
            }
        })
    </script>
</html>